<template>
	<view>
		<view class="contbut">
			<view class="" v-for="(item,index) in list" :key="item.id" @tap="clickthree(item.nickna)">
				<image class="butimg" :src="item.img" mode=""></image>
				<view class="">
					{{item.title}}
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import {mapMutations} from 'vuex'
	export default {
		name:"login",
		data() {
			return {
				list:[{id:0,title:"微信登录",nickna:"weixin" ,img:"/static/tabBar/my/login/weixin.webp"},
					{id:1,title:"微博登录",nickna:"sinaweibo",img:"/static/tabBar/my/login/weibo.webp"},
					{id:2,title:"qq登录",nickna:"qq",img:"/static/tabBar/my/login/qq.webp"},
				],
				thecop:-1
			};
		},
		methods:{
			...mapMutations(['login']),
			//点击快捷登录方式:
			clickthree(m){
				uni.login({
					provider:m,
					success: (res) => {
						//直接获取账号的信息:包含姓名,头像....
						uni.getUserInfo({
							provider:m,
							success: (res) => {
								let provider =m;//登录方式
								let openid = res.userInfo.openId || res.userInfo.openid;//qq和微信不相同:openId 和 openid
								let nickName = res.userInfo.nickName;//用户名称
								let avatarUrl = res.userInfo.avatarUrl;//用户图片地址
								$http.request({
									url: "/loginother",
									method:"POST",
									data:{
										provider:provider,
										openid:openid,
										nickName:nickName,
										avatarUrl:avatarUrl
									}
								}).then((res) => {
									//从后端获取数据res后,进行登录
									this.login(res);
									//跳完地址首页:
									uni.redirectTo({
										url:"/pages/index/index"
									})
								}).catch((e) => {
									console.log(e);
								})
							}
						})
					}
				})
				},
		}
		
	}
</script>

<style lang="scss">
.contbut{
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0 10rpx;
		.butimg{
			width: 120rpx;
			height: 120rpx;
		}
	}
</style>